
import React from 'react';
import PropTypes from 'prop-types';
import {injectIntl} from './intl';
import {Card, Row, Col, Table, Divider, Button} from 'antd';
import {DATETIME_FORMAT, FILES_API, TABLE} from '../constants';
import {formatDateTime, conventEnumValueToString, uuid, exportDownload} from '../utils';
import {currency} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
const {Description} = DescriptionList;
import ImagePreviewBtn from './ImagePreviewBtn';
import {exportUsedPartDestory} from './api';
import styles from './style.css';
import {generateRowSpanData} from './utils';
/* eslint-disable react/prefer-stateless-function */
class Detail extends React.PureComponent {
    onClickExportBtn = () => {
        this.props.openLoding();
        exportUsedPartDestory(this.props.id).then(res => {
            this.props.closeLoding();
            exportDownload(res.data);
        });
    }
    render() {
        const {details = [], attachments = []} = this.props.detail;
        const fileList = attachments.map(item => (<Description key={item.fileId}><a icon="download" href={`${FILES_API.files}/${item.fileId}`} size="small">
            {item.fileName}</a></Description>));
        const newDetails = generateRowSpanData(details.map(item => ({
            id: uuid(),
            ...item,
        })), 'claimId', ['claimCode', 'claimSignedRemark', 'subDealerCode', 'subDealerName']);
        const columns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.claimCode',
                    defaultMessage: '索赔单号'
                }),
                dataIndex: 'claimCode',
                render: (text, record) => ({
                    children: text,
                    props: {
                        rowSpan: text ? record.rowSpan : 0,
                    },
                })
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.supplierCode',
                    defaultMessage: '供应商编号'
                }),
                dataIndex: 'supplierCode',
                render: (text, record) => ({
                    children: text,
                    props: {
                        rowSpan: text ? record.rowSpan : 0,
                    },
                })
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.usedPartBarCode',
                    defaultMessage: '旧件条码'
                }),
                dataIndex: 'usedPartBarCode',
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.usedPartCode',
                    defaultMessage: '备件号'
                }),
                dataIndex: 'usedPartCode',
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.usedPartName',
                    defaultMessage: '备件名称'
                }),
                dataIndex: 'usedPartName',
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.quantity',
                    defaultMessage: '数量'
                }),
                dataIndex: 'quantity',
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.unit',
                    defaultMessage: '单位'
                }),
                dataIndex: 'unit',
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.remark',
                    defaultMessage: '备注'
                }),
                dataIndex: 'remark',
            }
        ];
   
        if(!this.props.isDealerUser)
            columns.splice(1, 0, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.claimSignedRemark',
                    defaultMessage: '索赔标记备注'
                }),
                dataIndex: 'claimSignedRemark',
                render: (text, record) => ({
                    children: text,
                    props: {
                        rowSpan: text ? record.rowSpan : 0,
                    },
                })
            });
        if(details.length > 0 && details.some(d => d.subDealerName !== 'NULL'))
            columns.splice(1, 0, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.subDealerName',
                    defaultMessage: '经销商名称'
                }),
                dataIndex: 'subDealerName',
                render: (text, record) => ({
                    children: text,
                    props: {
                        rowSpan: text ? record.rowSpan : 0,
                    },
                })
            });
        if(details.length > 0 && details.some(d => d.subDealerCode !== 'NULL'))
            columns.splice(1, 0, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.subDealerCode',
                    defaultMessage: '经销商编号'
                }),
                dataIndex: 'subDealerCode',
                render: (text, record) => ({
                    children: text,
                    props: {
                        rowSpan: text ? record.rowSpan : 0,
                    },
                })
            });
        return (
            <div>
                {!this.props.isDealerUser && <Card>
                    <DescriptionList size="large" title={<Row><Col span={6}>{this.props.intl.formatMessage({
                        id: 'commonDetail.order.title',
                        defaultMessage: '单据信息'
                    })}</Col>
                    <Col className={styles.optionBtn} span={18}>{this.props.operations}</Col></Row>}>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.code',
                                defaultMessage: '编号'
                            })}>
                            {this.props.detail.code}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.brandCode',
                                defaultMessage: '品牌'
                            })}>
                            {this.props.detail.brandCode}
                        </Description>
                        {!this.props.isDealerUser && [<Description
                            key="dealerCode"
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.dealerCode',
                                defaultMessage: '总代编号'
                            })}>
                            {this.props.detail.dealerCode}
                        </Description>,
                        <Description
                            key="dealerName"
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.dealerName',
                                defaultMessage: '总代名称'
                            })}>
                            {this.props.detail.dealerName}
                        </Description>]}
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.currency',
                                defaultMessage: '币种'
                            })}>
                            {conventEnumValueToString(currency, this.props.detail.currency)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.remark',
                                defaultMessage: '备注'
                            })}>
                            {this.props.detail.remark}
                        </Description>
                    </DescriptionList>
                    {
                        this.props.isDetail ? <React.Fragment>
                            <Divider />
                            <DescriptionList size="large" title={this.props.intl.formatMessage({
                                id: 'commonDetail.approveInfo.title',
                                defaultMessage: '审核信息'
                            })}>
                                <Description
                                    term={this.props.intl.formatMessage({
                                        id: 'commonDetail.info.approverName',
                                        defaultMessage: '审核人'
                                    })}>
                                    {this.props.detail.approverName}
                                </Description>
                                <Description
                                    term={this.props.intl.formatMessage({
                                        id: 'commonDetail.info.approveTime',
                                        defaultMessage: '审核时间'
                                    })}>
                                    {formatDateTime(this.props.detail.approveTime, DATETIME_FORMAT)}
                                </Description>
                            </DescriptionList>
                            <DescriptionList col={1} size="large">
                                <Description term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.approveComment',
                                    defaultMessage: '审核意见'
                                })}>
                                    {this.props.detail.approveComment}
                                </Description>
                            </DescriptionList>
                        </React.Fragment> : null
                    }
                    <React.Fragment>
                        <Divider />
                        <DescriptionList size="large" title={this.props.intl.formatMessage({
                            id: 'commonDetail.approveInfo.submitedComment',
                            defaultMessage: '下发意见'
                        })}>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.submitedComment',
                                    defaultMessage: '下发意见'
                                })}>
                                {this.props.detail.submitedComment}
                            </Description>
                        </DescriptionList>
                    </React.Fragment>
                </Card>}
                <Card
                    extra={<Button
                        onClick={this.onClickExportBtn}
                        loading={this.props.loading}
                        size="small">
                        {this.props.intl.formatMessage({
                            id: 'CommonDetail.btn.export',
                            defaultMessage: '导出'
                        })}
                    </Button>}
                    title={this.props.intl.formatMessage({
                        id: 'commonDetail.details.title',
                        defaultMessage: '材料清单'
                    })}
                    bordered={false}>
                    <Table
                        className="white-space-nowrap"
                        rowKey="keyId"
                        columns={columns}
                        pagination={false}
                        dataSource={newDetails} {...TABLE} />
                </Card>
                {!this.props.isConfirm && <Card
                    extra={<ImagePreviewBtn attachments={attachments} />}
                    title={this.props.intl.formatMessage({
                        id: 'commonDetail.attachments.title',
                        defaultMessage: '附件清单'
                    })}
                    bordered={false}>
                    {fileList.length ? <DescriptionList col={1} size="large">
                        {fileList}
                    </DescriptionList> : this.props.intl.formatMessage({
                        id: 'commonDetail.attachments.noData',
                        defaultMessage: '暂无附件'
                    })}
                </Card>}
            </div>
        );
    }
}

Detail.defaultProps = {
    detail: {},
    isDetail: false,
    isDealerUser: true,
};

Detail.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    isDealerUser: PropTypes.bool,
    isDetail: PropTypes.bool,
    operations: PropTypes.any
};
export default injectIntl(Detail);
